<!--  -->
<template>
  <div id="BrandList">
    <div class="hint">
      <hint></hint>
    </div>
    <div class="search">
      <div class="he">
        <p><span>品牌筛选</span></p>
        <div class="input">
          <span>品牌名称</span>
          <el-input
            placeholder="请输入内容"
            v-model="input"
            clearable
          ></el-input>
          <el-button type="primary" icon="el-icon-search" @click="brandfilter"
            >搜索</el-button
          >
        </div>
      </div>
    </div>
    <div class="list">
      <div class="list_header">
        <p>品牌列表</p>
        <el-button type="primary" icon="el-icon-plus" @click="brandadd"
          >品牌添加</el-button
        >
      </div>
      <div class="list_content">
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          style="width: 100%"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="品牌名称">
                  <el-input
                    placeholder="品牌名称"
                    v-model="props.row.name"
                    clearable
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="品牌描述">
                  <el-input
                    placeholder="品牌描述"
                    v-model="props.row.des"
                    clearable
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="绑定店铺">
                  <el-input
                    placeholder="绑定店铺"
                    v-model="props.row.bind"
                    clearable
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            width="84"
            type="index"
            align="center"
          ></el-table-column>
          <el-table-column
            label="品牌名称"
            width="362"
            prop="name"
            align="center"
          ></el-table-column>
          <el-table-column
            label="品牌描述"
            width="396"
            prop="des"
            align="center"
          ></el-table-column>
          <el-table-column
            label="绑定店铺"
            width="277"
            prop="bind"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagebreak">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>

    <div id="mask">
      <div class="inmask">
        <el-form>
          <el-form-item required:ture>
            <el-input
              type="text"
              placeholder="品牌名称"
              v-model="nametext"
              maxlength="10"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              type="text"
              placeholder="品牌描述"
              v-model="destext"
              maxlength="30"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-input
              type="text"
              placeholder="绑定店铺"
              v-model="bindtext"
              show-word-limit
            ></el-input> -->
            <el-col :span="12">
    <el-autocomplete
      class="inline-input"
      v-model="bindtext"
      :fetch-suggestions="querySearch"
      placeholder="绑定店铺"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
          </el-form-item>
        </el-form>

        <el-button type="primary" @click="add">添加</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import hint from "./header";
export default {

  //import引入的组件需要注入到对象中才能使用
  components: {
    hint: hint,
  },
  data() {
    //这里存放数据

    return {
    restaurants: [],
      currentPage: 1,
      pagesize: 5,
      brandsearch: "",
      input: "张若尘",
      nametext: "",
      destext: "",
      bindtext: "",
      tableData: [

      ],
      tableDatatwo:[]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    brandadd: function () {
      document.getElementById("mask").style.display = "block";
    },
    add: function () {
      if (this.nametext === "" || this.destext === "" || this.bindtext === "") {
        alert("请填写全部信息");
      } else {
        this.tableData.unshift ({
          name: this.nametext,
          des: this.destext,
          bind: this.bindtext,
        });
        this.nametext = "";
        this.destext = "";
        this.bindtext = "";
      }
    },

    cancel: function () {
      document.getElementById("mask").style.display = "none";
    },
    handleDelete: function (index) {
      this.tableData.splice(index, 1);
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize);
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage);
    },
    handleUserList() {
      this.$http.get("http://localhost:3000/tableData").then((res) => {
        this.tableData = res.body;
      });
    },
  brandfilter:function(){
        console.log(this.tableData)

    var tabafilter=this.tableData.filter(function(obj){
      return obj.name==='张若尘'
    })
              console.log(tabafilter)
              console.log(this.input)
    this.tableData=tabafilter


  },
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
       createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll(){
        return[
          { "value": "衍神山"},
          { "value": "两仪宗"},
          { "value": "星恒天"},
          { "value": "生死墟"},
          { "value": "修罗殿"},
          { "value": "不人堂"},
          { "value": "罗刹国"},
          { "value": "昆仑界"},
        ]
      },
       handleSelect(item) {
        console.log(item);
      }
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.restaurants = this.loadAll();
    this.$http.get("http://rap2api.taobao.org/app/mock/276742/getName",{}).then((res)=>{
      console.log(res.data.tableData)
      this.tableData=res.data.tableData
    })
    
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
#bj {
  width: 200px;
  height: 200px;
}
#BrandList {
  position: relative;
  min-width: 1600px;
}
.search {
  width: 1390px;
  height: 114px;
  font-weight: 700;
  margin: 10px auto;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  overflow: hidden;
}
.el-autocomplete {
    position: relative;
    display: inline-block;
    width: 420px;
}
.search p {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  text-align: left;
  line-height: 50px;
  border-bottom: 1px solid #e4e4e4;
  font-size: 14px;
  color: #666;
}
.search span {
  margin-left: 20px;
}
.el-form--inline .el-form-item {
  display: block;
  margin-right: 10px;
}
.input {
  display: flex;
  border-radius: 0;
  margin-top: 12px;
}
.input span {
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  text-align: right;
  line-height: 40px;
  margin-left: 60px;
  margin-right: 20px;
}
.el-input {
  width: 322px;
  height: 35px;
  border-radius: 0;
  margin-right: 30px;
}
.list {
  width: 1390px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px 5px;
  font-size: 14px;
  color: #666666;
}
.list_header {
  display: flex;
  justify-content: space-between;
  padding-right: 60px;
  margin-bottom: 10px;
  height: 50px;
}
.list_header p {
  line-height: 50px;
  padding: 0 20px;
}
.pagebreak {
  text-align: right;
  margin-top: 10px;
}

#mask {
  background-color: rgba(129, 148, 148, 0.5);
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
}
.inmask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 500px;
  height: 550px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 70px 40px;
}
.inmask .el-button {
  width: 100%;
  display: block;
  margin-bottom: 30px;
}
.inmask .el-input {
  width: 100%;
  display: block;
  margin-bottom: 30px;
}
.el-button + .el-button {
  margin-left: 0;
}
</style>